<template>
  <el-container>
    <el-aside style="width: 100px;">
      <switch></switch>
      <SideMenu @indexSelect="listByCategory" ref="sideMenu"></SideMenu>
    </el-aside>
    <el-main>
      <books class="books-area" ref="booksArea"></books>
    </el-main>
  </el-container>
</template>

<script>
import SideMenu from './SideMenu'
import Books from './Books'

export default {
  name: 'AppLibrary',
  components: { Books, SideMenu },
  methods: {
    listByCategory () {
      var _this = this
      var cid = this.$refs.sideMenu.cid
      var url = '/books/' + '?cid=' + cid + '&page_size=10&page_number=1'
      this.$axios.get(url).then(resp => {
        if (resp && resp.data.code === '0') {
          _this.$refs.booksArea.books = resp.data.data.books
        }
        // if (resp && resp.data.code === 200) {
        //   _this.$refs.booksArea.currentPage = 1
        // }
      })
    }
  }
}
</script>

<style scoped>
  .books-area {
    width: 990px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    position: fixed;
  }
</style>
